<template>
  <!-- 车务管理 -->
  <div style="height:100%">
    <div class="public" @mouseenter="trafficManger = true" @mouseleave="trafficManger = false">
      <span>综合管理</span>
      <div class="work_area_list" v-if="trafficManger">
        <span @click="carManage">车辆基础信息</span>
      </div>
    </div>
    <!-- 车辆基础信息 -->
    <div class="organization carInformation" v-if="carInformation.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>车辆基础信息</span>
        <i class="iconfont icon-guanbi" @click="carInformation.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="车牌号码：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="卡号：">
            <el-input v-model="person.name" placeholder="车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="分组:">
            <el-select v-model="person.client" placeholder="分组">
              <el-option
                v-for="(item,index) in car.typeList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 车辆基础信息列表 -->
        <el-table
          :data="car.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="car.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="433px"
        >
          <el-table-column fixed prop="ID" label="车辆编号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dw" label="区县" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Cph" label="单位" align="center"></el-table-column>
          <el-table-column fixed prop="Model" label="车辆名称" align="center"></el-table-column>
          <el-table-column fixed prop="Person" label="通讯卡号" align="center"></el-table-column>
          <el-table-column fixed prop="Buytime" label="车辆类型" align="center" width="70"></el-table-column>
          <el-table-column fixed prop="Explain" label="载重吨数" align="center"></el-table-column>
          <el-table-column fixed prop="Usedeptname" label="车牌照号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vowner" label="机动车所有人" align="center"></el-table-column>
          <el-table-column fixed prop="Brand" label="厂牌照号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vin" label="车辆识别代号" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Enginenum" label="燃料类型" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Dischargerate" label="登记日期" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Registertime" label="使用状态" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="行程里程" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="是否安装GPS" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="GPS安装日期" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="缴费周期(年)" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="缴费类型" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="Vcondition" label="备注" align="center" width="90"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

export default {
  data () {
    return {
      trafficManger: false,
      carInformation: {
        show: false
      },
      person: {
        show: false,
        name: '',
        client: '',
        clientList: [],
        dataList: [],
        listShow: true
      },
      car: {
        show: false,
        typeList: ['', '吸尘车', '小型机扫车', '机扫车', '洒水车', '洗路车', '高压清洗车', '除雪车', '挤压车', '垃圾车', '多功能车', '其他'],
        carCondition: ['', '正常使用', '拟报废', '已报废'],
        dataList: [],
        listShow: true
      }
    }
  },
  created () {
    eventBus.$on('closeCover', val => (this.organization.show = val))
  },
  methods: {
    carManage () {
      this.carInformation.show = true
      // eventBus.$emit('isCover', true)
      this.getCarList()
    },
    closecarManage () {
      this.carInformation.show = false
      this.car.listShow = true
    },
    // 车辆基础信息列表
    async getCarList () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCarInformationListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.car.dataList = data
    },
    cellMouseEnter () {

    },
    rowClick () {

    },
    editPerson () {

    }
  }

}
</script>

<style scoped lang='less'>
.public {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  cursor: default;
  text-align: center;
  border-right:2px solid #3BAEFA;
  & > span:hover {
    color: #3BAEFA;
  }
  .work_area_list {
    width: 220px;
    // height: 78px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: absolute;
    top: 15px;
    z-index: 999999;
    span:last-child{
      border-bottom: 0;
    }
    span {
      display: block;
      padding: 0 10px 0 10px;
      line-height: 26px;
      color: #333;
      border-bottom: 1px solid #2ea9fa;
      &:hover {
        color: #fff;
        background-color: #2ea9fa;
      }
    }
  }
}
.organization {
  width: 70%;
  height: 460px;
  padding: 0;
  padding-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  z-index: 99;
  h2 {
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
    color: #666;
    span {
      margin-right: 5px;
    }
    i {
      float: right;
      margin-right: 10px;
    }
  }
  .organization_content {
    height: calc(~'100% - 33px');
  }
}
.top_box {
  height: 30px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-left: 20px;
  .el-form {
    height: 26px;
    .el-input {
      width: 100px;
    }
    .el-select {
      width: 150px;
    }
    /deep/.el-form-item {
      vertical-align: baseline;
      .el-button /deep/ span {
        margin-left: 0;
      }
    }
  }
}
.car_content {
  //     width: 100%;
  //   height: 492px;
  height: calc(~'100% - 33px');
  overflow: auto;
  // overflow-x: auto;
  // overflow-y: auto;
  .new_person {
    width: 400px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 15px auto;
    box-shadow: 0 0 5px 2px #ccc;
    .icon-guanbi {
      float: right;
      margin-right: 10px;
    }
    .el-form {
      width: 260px;
      height: 180px;
      margin: 10px auto;
      background-color: #fff;
      .el-form-item {
        margin-bottom: 20px;
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-top: 10px;
        .el-button {
          margin: 0 10px;
          /deep/span {
            padding: 0 5px;
          }
        }
      }
    }
  }
}
</style>
